<script setup lang="ts">
import { reactive } from 'vue'; import ChartCommon from '@/components/ChartCommon.vue';


// 图一配置项
const option1 = reactive({
    title: {
        text: 'Basic Radar Chart'
    },
    legend: {
        data: ['Allocated Budget', 'Actual Spending']
    },
    radar: {
        // shape: 'circle',
        indicator: [
            { name: 'Sales', max: 6500 },
            { name: 'Administration', max: 16000 },
            { name: 'Information Technology', max: 30000 },
            { name: 'Customer Support', max: 38000 },
            { name: 'Development', max: 52000 },
            { name: 'Marketing', max: 25000 }
        ]
    },
    series: [
        {
            name: 'Budget vs spending',
            type: 'radar',
            data: [
                {
                    value: [4200, 3000, 20000, 35000, 50000, 18000],
                    name: 'Allocated Budget'
                },
                {
                    value: [5000, 14000, 28000, 26000, 42000, 21000],
                    name: 'Actual Spending'
                }
            ]
        }
    ]

})

// 图二配置项
const option2 = reactive({
    color: ['#67F9D8', '#FFE434', '#56A3F1', '#FF917C'],
    title: {
        text: 'Customized Radar Chart'
    },
    legend: {},
    radar: [
        {
            indicator: [
                { text: 'Indicator1' },
                { text: 'Indicator2' },
                { text: 'Indicator3' },
                { text: 'Indicator4' },
                { text: 'Indicator5' }
            ],
            center: ['25%', '50%'],
            radius: 120,
            startAngle: 90,
            splitNumber: 4,
            shape: 'circle',
            axisName: {
                formatter: '【{value}】',
                color: '#428BD4'
            },
            splitArea: {
                areaStyle: {
                    color: ['#77EADF', '#26C3BE', '#64AFE9', '#428BD4'],
                    shadowColor: 'rgba(0, 0, 0, 0.2)',
                    shadowBlur: 10
                }
            },
            axisLine: {
                lineStyle: {
                    color: 'rgba(211, 253, 250, 0.8)'
                }
            },
            splitLine: {
                lineStyle: {
                    color: 'rgba(211, 253, 250, 0.8)'
                }
            }
        },
        {
            indicator: [
                { text: 'Indicator1', max: 150 },
                { text: 'Indicator2', max: 150 },
                { text: 'Indicator3', max: 150 },
                { text: 'Indicator4', max: 120 },
                { text: 'Indicator5', max: 108 },
                { text: 'Indicator6', max: 72 }
            ],
            center: ['75%', '50%'],
            radius: 120,
            axisName: {
                color: '#fff',
                backgroundColor: '#666',
                borderRadius: 3,
                padding: [3, 5]
            }
        }
    ],
    series: [
        {
            type: 'radar',
            emphasis: {
                lineStyle: {
                    width: 4
                }
            },
            data: [
                {
                    value: [100, 8, 0.4, -80, 2000],
                    name: 'Data A'
                },
                {
                    value: [60, 5, 0.3, -100, 1500],
                    name: 'Data B',
                    areaStyle: {
                        color: 'rgba(255, 228, 52, 0.6)'
                    }
                }
            ]
        },
        {
            type: 'radar',
            radarIndex: 1,
            data: [
                {
                    value: [120, 118, 130, 100, 99, 70],
                    name: 'Data C',
                    symbol: 'rect',
                    symbolSize: 12,
                    lineStyle: {
                        type: 'dashed'
                    }
                },
                {
                    value: [100, 93, 50, 90, 70, 60],
                    name: 'Data D',
                    areaStyle: {
                        color: 'rgba(255, 145, 124, 0.6)'
                    }
                }
            ]
        }
    ]
})

// 图三配置项
const option3 = reactive({
    title: {
        text: 'Multiple Radar'
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        left: 'center',
        data: [
            'A Software',
            'A Phone',
            'Another Phone',
            'Precipitation',
            'Evaporation'
        ]
    },
    radar: [
        {
            indicator: [
                { text: 'Brand', max: 100 },
                { text: 'Content', max: 100 },
                { text: 'Usability', max: 100 },
                { text: 'Function', max: 100 }
            ],
            center: ['25%', '40%'],
            radius: 80
        },
        {
            indicator: [
                { text: 'Look', max: 100 },
                { text: 'Photo', max: 100 },
                { text: 'System', max: 100 },
                { text: 'Performance', max: 100 },
                { text: 'Screen', max: 100 }
            ],
            radius: 80,
            center: ['50%', '60%']
        },
        {
            indicator: (function () {
                var res = [];
                for (var i = 1; i <= 12; i++) {
                    res.push({ text: i + '月', max: 100 });
                }
                return res;
            })(),
            center: ['75%', '40%'],
            radius: 80
        }
    ],
    series: [
        {
            type: 'radar',
            tooltip: {
                trigger: 'item'
            },
            areaStyle: {},
            data: [
                {
                    value: [60, 73, 85, 40],
                    name: 'A Software'
                }
            ]
        },
        {
            type: 'radar',
            radarIndex: 1,
            areaStyle: {},
            data: [
                {
                    value: [85, 90, 90, 95, 95],
                    name: 'A Phone'
                },
                {
                    value: [95, 80, 95, 90, 93],
                    name: 'Another Phone'
                }
            ]
        },
        {
            type: 'radar',
            radarIndex: 2,
            areaStyle: {},
            data: [
                {
                    name: 'Precipitation',
                    value: [
                        2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 75.6, 82.2, 48.7, 18.8, 6.0, 2.3
                    ]
                },
                {
                    name: 'Evaporation',
                    value: [
                        2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 35.6, 62.2, 32.6, 20.0, 6.4, 3.3
                    ]
                }
            ]
        }
    ]

})

// 图四配置项
const option4 = reactive({
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
    legend: {
        data: ['利润', '费用', '收入']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: [
        {
            type: 'value'
        }
    ],
    yAxis: [
        {
            type: 'category',
            axisTick: {
                show: false
            },
            data: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日']
        }
    ],
    series: [
        {
            name: '利润',
            type: 'bar',
            label: {
                show: true,
                position: 'inside'
            },
            emphasis: {
                focus: 'series'
            },
            data: [200, 170, 240, 244, 200, 220, 210]
        },
        {
            name: '收入',
            type: 'bar',
            stack: 'Total',
            label: {
                show: true
            },
            emphasis: {
                focus: 'series'
            },
            data: [320, 302, 341, 374, 390, 450, 420]
        },
        {
            name: '费用',
            type: 'bar',
            stack: 'Total',
            label: {
                show: true,
                // 柱状图数值在左侧
                position: 'left'
            },
            emphasis: {
                focus: 'series'
            },
            data: [-120, -132, -101, -134, -190, -230, -210]
        }
    ]
})
</script>

<template>

    <div class="chart-container">
        <div class="chart-item">
            <ChartCommon :chart_option="option1" />
        </div>
        <div class="chart-item">
            <ChartCommon :chart_option="option2" />
        </div>
    </div>
    <div class="chart-container">
        <div class="chart-item">
            <ChartCommon :chart_option="option3" />
        </div>
        <div class="chart-item">
            <ChartCommon :chart_option="option4" />
        </div>
    </div>

</template>

<style scoped lang="scss">
@import '@/styles/scss_var.scss'
</style>
